import '../style/header.scss'
import '../style/common.scss'
import Search from "antd/es/input/Search";
import {SearchProps} from "antd/lib/input";
import {useContext, useState} from "react";
import {Button, Dropdown, MenuProps, message, Modal} from "antd";
import {DataContext} from "../provider/DataProvider.tsx";
import {doLogout} from "../api/apis.ts";
import {Link, NavLink, useNavigate} from "react-router-dom";
import {useLoginUser} from "../hooks/LoginHooks.tsx";

export default function () {
  const navigate = useNavigate();
  const onSearch: SearchProps['onSearch'] = (value) => {
    if (value) {
      navigate(`/?search=${value}`);
    }else {
      navigate(`/`);
    }
  };
  const [isModalOpen, setIsModalOpen] = useState(false);
  const handleCancel = () => {
    setIsModalOpen(false)
  }
  const dataContext = useContext(DataContext)
  const jumpToLogin = (type: string) => {
    const jumpUrl = dataContext?.loginTypes?.find((item) => item.type === type)?.redirectUrl;
    if (jumpUrl) {
      localStorage.setItem("lastLoginType", type);
      window.location.href = jumpUrl
    }
  }
  const [user, setUser] = useState(useLoginUser())
  const logout = async () => {
    const {code} = await doLogout();
    if (code === 200) {
      message.success('成功退出登录')
      setUser(null)
    }
  }
  const items: MenuProps['items'] = [
    {
      key: '1',
      label: (
        <div className='base-color' onClick={() => {
          navigate(`/?creator=${user?.id}&creator_name=${user?.name}`)
        }}>
          我的问题
        </div>
      ),
    },
    {
      key: '3',
      label: (
        <div className='base-color' onClick={logout}>
          退出登录
        </div>
      ),
    },
  ];
  return <>
    <div className='header-container'>
      <div className='header-left'>
        <Link to={'/'} className='header-title'>
          Myhub社区
        </Link>
        <Search placeholder="输入关键字" allowClear onSearch={onSearch} style={{width: 200}}/>
      </div>
      <div className='header-right el-center'>
        {
          user ?
            <div className='login-functions el-center'>
              <NavLink to={'/question/edit'}
                       className='functions'>
                发布话题
              </NavLink>
              <Dropdown className='functions' menu={{items}} placement="bottomRight">
                <div>{user.name}<span className='caret'></span></div>
              </Dropdown>
            </div> :
            <div className='unlogin-funtions el-center'>
              <div onClick={() => setIsModalOpen(true)} className='functions'>登录</div>
            </div>
        }
      </div>
      <Modal width='300px' title="登录" open={isModalOpen} onCancel={handleCancel} footer={
        <>
          <Button type="primary" onClick={() => setIsModalOpen(false)}>取消</Button>
        </>
      }>
        <div className='login-modal-container el-center'>
          <img onClick={() => jumpToLogin('gitee')} className='login-icon' src='/assets/gitee.png' alt=""/>
          <img onClick={() => jumpToLogin('baidu')} className='login-icon' src='/assets/baidu.png' alt=""/>
        </div>
      </Modal>
    </div>
  </>
}